<template>
  <ul ref="historyUl">
    <li @click="selectItem(item)" class="listLi" v-for="(item, index) in searchList" :key="index">
      <p class="text">{{item}}</p>
      <img @click.stop="selectItemDel(item)" src="@/assets/img/icon-smldel.png" alt="删除">
    </li>
  </ul>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { playlistMixin } from 'assets/js/mixin'
export default {
  mixins: [playlistMixin],
  props: {
    searchList: {
      type: Array
    }
  },
  methods: {
    handlePlaylist(playlist) {
      const bottom = playlist.length > 0 ? "25px" : ""
      this.$refs.historyUl.style.paddingBottom = bottom
      this.$emit("hisScorll")
    },
    // 点击搜索历史列表
    selectItem(item) {
      this.$emit("select", item)
    },
    // 点击某个历史列表叉号
    selectItemDel(item) {
      this.deleteSearchHistory(item)
    },
    ...mapActions(["deleteSearchHistory"])
  },
  computed: {
    ...mapGetters(["searchHistory", "playlist"])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "assets/css/mixin.scss";
.historyUl {
  width: 100%;
}
.historyUl .listLi {
  width: 100%;
  height: rem(40);
  overflow: hidden;
}
.listLi .text {
  display: inline-block;
  color: rgba(255, 255, 255, 0.5);
  font-size: rem(16);
  line-height: rem(40);
}
.listLi img {
  width: rem(20);
  height: rem(20);
  margin-top: rem(10);
  float: right;
}
</style>